<template>
    <el-dialog title="提示" :visible.sync="show" width="50%" :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="top">
            <el-amap-search-box 
            class="search-box" 
            :search-option="searchOption" 
            :on-search-result="onSearchResult"
            >
            </el-amap-search-box>
            <el-button type="primary" @click="position">确定</el-button>
        </div>
        <div class="amap-page-container">
            <el-amap
            ref="map"
            vid="amapDemo"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :events="events"
            class="amap-demo"
            >
                <el-amap-marker
                    v-for="(marker, i) in markers"
                    :key="i"
                    :position="marker.position"
                ></el-amap-marker>
            </el-amap>
        </div>
    </el-dialog>
</template>
<script>
    import { AMapManager } from "vue-amap";
    export default {
        props: {
            dialogVisible:null,
        },
        data() {
            return {
                show:this.dialogVisible,
                zoom: 15,
                center: [116.39755,39.909189],
                markers: [
                    {
                        position: [116.39755,39.909189],
                        events: {
                            click: () => {
                                alert("click marker");
                            },
                            dragend: (e) => {
                                console.log("---event---: dragend");
                                this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
                            },
                        },
                        visible: true,
                        draggable: false,
                        template: "<span>1</span>",
                    },
                ],
                searchOption: {
                    city: '全国',
                    citylimit: false
                },
                events: {
                    init: (o) => {
                        console.log(o.getCenter());
                        console.log(this.$refs.map.$$getInstance());
                        o.getCity((result) => {
                            console.log(result);
                        });
                    },
                    moveend: () => {},
                    zoomchange: () => {},
                    click: (e) => {
                        let { lng, lat } = e.lnglat;
                        self.lng = lng;
                        self.lat = lat;
                        console.log('坐标-----------',self.lng, self.lat);
                        let points = [self.lng, self.lat];
                        this.getAddress(points);
                        let marker = {
                            position: [self.lng, self.lat],
                        };
                        if (!this.markers.length) return;
                        this.markers.splice(this.markers.length - 1, 1);

                        this.markers.push(marker);
                    },
                },

                getAddress(points) {
                    let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" });
                    geocoder.getAddress(points, (status, result) => {
                        if (status === "complete" && result.regeocode) {
                            this.address = result.regeocode.formattedAddress;
                            console.log(this.address);
                        }
                    });
                },
                plugin: [
                    
                ],
                
            };
        },
        methods: {
            position(){
                console.log(this.markers[0].position)
                this.$emit('position',this.markers[0].position)
            },
            getMap() {
                console.log('AMapManager._componentMap-----------',AMapManager._componentMap);
                // gaode map instance
                console.log(AMapManager._map);
                alert("click text");
            },
            onSearchResult(pois) {
                console.log(pois)
                let latSum = 0;
                let lngSum = 0;
                if (pois.length > 0) {
                    pois.forEach(poi => {
                        let {lng, lat} = poi;
                        lngSum += lng;
                        latSum += lat;
                    });
                    let center = {
                        lng: lngSum / pois.length,
                        lat: latSum / pois.length
                    };
                    this.center = [center.lng, center.lat];
                    this.markers[0].position = this.center
                }
            }
        },
        watch:{
			show:{
				handler(val) {
					this.$emit('change', {
						show:this.show
				    })
				}
			}
		}
    };
</script>
<style lang="scss" scoped>
    .amap-page-container {
        width: 100%;
        height: 400px;
        position: relative;
    }
    .search-box {
        border: 1px solid #666;
        margin: 10px 0;
    }
    .top{
        display: flex;
        align-items: center;
    }
    button{
        height: 45px;
        margin-left: 15px!important;
    }
</style>\
